<template>
	<view class="goods-list-content">
		<!-- 滑动项列表 -->
		<u-swipe-action v-if="slideOption.length != 0 && list">
			<u-swipe-action-item :options="slideOption" v-for="(item, index) in list" :ref="'swipeAction' + item.id"
				:name="JSON.stringify(item)" :key="index" @click="onBtnClick" autoClose>
				<view class="goods-item" @click="onItemClick(item,index)">
					<image class="item-img" :src="item[photoKey] ? item[photoKey] : '/static/image/defaultImg.png'"></image>
					<view class="item-info">
						<view class="info-title">
							<u--text :lines="2" :text="item[titleKey] ? item[titleKey] : ''"></u--text>
						</view>
						<view class="info-price">{{ item[priceKey] ? `¥${item[priceKey]}` : '' }}</view>
					</view>
					<view class="info-btn" v-if="isAdd" :style="btnStyle" @click="onAddClick"><u-icon name="plus" color="#fff"></u-icon></view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
		<!-- 普通列表 -->
		<u-list v-if="slideOption.length == 0 && list">
			<u-list-item v-for="(item, index) in list" :key="index">
				<view class="goods-item" @click="onItemClick(item,index)">
					<image class="item-img" :src="item[photoKey] ? item[photoKey] : '/static/image/defaultImg.png'"></image>
					<view class="item-info">
						<view class="info-title">
							<u--text :lines="2" :text="item[titleKey] ? item[titleKey] : ''"></u--text>
						</view>
						<view class="info-price">{{ item[priceKey] ? `¥${item[priceKey]}` : '' }}</view>
					</view>
					<view class="info-btn" v-if="isAdd" :style="btnStyle" @click.stop="onAddClick(item,index)"><u-icon name="plus" color="#fff"></u-icon></view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	export default {
		name: "ycy-goods-list",
		props: {
			// bgColor: { type: String, default: 'white' },
			// height: { type: Number, default: 78 },
			titleKey: { type: String, default: 'title' },
			priceKey: { type: String, default: 'price' },
			photoKey: { type: String, default: 'url' },
			btnColor: { type: String, default: '#9dae8a' },
			isSelect: { type: Boolean, default: false }, //是否可选择
			isAdd: { type: Boolean, default: false }, //是否显示添加按钮
			slideOption: { type: Array, default: [] }, //[{ text: 'xxx', style: { backgroundColor: 'xxx' } }] 是否滑动列表项
			list: { type: Array, default: [] },
		},
		data() {
			return {
				isOpenBtn: false
			};
		},
		computed: {
			btnStyle() {
				return `background-color: ${this.btnColor};`;
			}
		},
		methods: {
			onItemClick(item, index) {
				
				this.$emit('onItemClick', { item, index});
			},
			onAddClick(item, index) {
				// console.log('onAddClick',{ item, index})
				this.$emit('onAddClick', { item, index});
			},
			onBtnClick(btnObject) {
				this.closeSwipeAction(JSON.parse(btnObject.name).id)
				this.$emit('onBtnClick', btnObject);
			},
			closeSwipeAction(itemId) {
				const ref = 'swipeAction' + itemId;
				this.$refs[ref][0].closeHandler() 
			},
		}
	}
</script>

<style lang="scss">
	.goods-item {
		padding-bottom: $spacing-base;
		position: relative;
		// border: 2px solid orangered;
		display: flex;
		.item-img {
			width: 150rpx;
			height: 150rpx;
			min-width: 150rpx;
			// border: 2px solid seagreen;
		}
		.item-info {
			padding-left: $spacing-base;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.info-title {
			font-size: $uni-font-size-base;
			// border: 2px solid lightblue;
		}
		.info-price {
			color: #dd524d;
			// border: 2px solid indianred;
		}
		.info-btn {
			    height: 36rpx;
			    width: 36rpx;
			    border-radius: 20rpx;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    padding: 2rpx;
				position: absolute;
				bottom: 24rpx;
				right: 16rpx;
		}
	}
	
</style>